<ion-content>
  <div style="padding: 48px">
    <ng-container *ngIf="!restarted; else refresh">
      <h1
        class="ion-text-center"
        style="padding-bottom: 36px; font-size: calc(2vw + 14px)"
      >
        StartOS - Diagnostic Mode
      </h1>

      <ng-container *ngIf="error">
        <h2
          style="
            padding-bottom: 16px;
            font-size: calc(1vw + 14px);
            font-weight: bold;
          "
        >
          StartOS launch error:
        </h2>
        <div class="code-block">
          <code>
            <ion-text color="warning">{{ error.problem }}</ion-text>
            <span *ngIf="error.details">
              <br />
              <br />
              <ion-text color="warning">{{ error.details }}</ion-text>
            </span>
          </code>
        </div>
        <ion-button routerLink="logs">View Logs</ion-button>
        <h2
          style="
            padding: 32px 0 16px 0;
            font-size: calc(1vw + 12px);
            font-weight: bold;
          "
        >
          Possible solutions:
        </h2>
        <div class="code-block">
          <code><ion-text color="success">{{ error.solution }}</ion-text></code>
        </div>
        <ion-button (click)="restart()">Restart Server</ion-button>
        <ion-button
          class="ion-padding-start"
          *ngIf="error.code === 15 || error.code === 25"
          (click)="forgetDrive()"
        >
          {{ error.code === 15 ? 'Setup Current Drive' : 'Enter Recovery Mode'
          }}
        </ion-button>

        <div class="ion-padding-top">
          <ion-button (click)="presentAlertSystemRebuild()" color="warning">
            System Rebuild
          </ion-button>
        </div>

        <div class="ion-padding-top">
          <ion-button (click)="presentAlertRepairDisk()" color="danger">
            Repair Drive
          </ion-button>
        </div>
      </ng-container>
    </ng-container>

    <ng-template #refresh>
      <h1
        class="ion-text-center"
        style="padding-bottom: 36px; font-size: calc(2vw + 12px)"
      >
        Server is restarting
      </h1>
      <h2 style="padding-bottom: 16px; font-size: calc(1vw + 12px)">
        Wait for the server to restart, then refresh this page.
      </h2>
      <ion-button (click)="refreshPage()">Refresh</ion-button>
    </ng-template>
  </div>
</ion-content>
